<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { getAssetsFile } from '@/utils/public';
  const action = reactive({
    tabType:1,
    rewardList:[] as Array<any>
  })
  const tablist = [
    {type:1,font:'周星榜'},
    {type:2,font:'富豪榜'},
    {type:3,font:'房间榜'}
  ]
  const handleTab = (type:any)=>{
    action.tabType = type
    if(type == 1) {
      action.rewardList = [
        {
          title:'周星榜第一名',
          twolist:[
            {image:'ranking1.png',name:'周星TOP1头像框*7天',cost:0},
            {image:'rewardGift1.png',name:'梦境童话礼物',cost:52000},
          ],
          carImg:'car1.png',
          carName:'周星TOP1进场座驾*7天',
          getTips:'主播所收到的周星值需≥40000，即可解锁梦境童话礼物'
        },
        {
          title:'周星榜第二名',
          twolist:[
            {image:'ranking2.png',name:'周星TOP2头像框*7天',cost:0},
            {image:'rewardGift2.png',name:'森林茶会礼物',cost:13140},
          ],
          carImg:'car2.png',
          carName:'周星TOP2进场座驾*7天',
          getTips:'主播所收到的周星值需≥10000，即可解锁森林茶会礼物'
        },
        {
          title:'周星榜第三名',
          twolist:[
            {image:'ranking3.png',name:'周星TOP3头像框*7天',cost:0},
          ],
          carImg:'car3.png',
          carName:'周星TOP3进场座驾*7天',
        }
      ]
    }
    if(type == 2) {
      action.rewardList = [
        {
          title:'富豪榜第一名',
          twolist:[
            {image:'ranking1.png',name:'周星TOP1头像框*7天',cost:0},
            {image:'rewardGift3.png',name:'专属礼物赠送特权*7天',cost:13140},
          ],
          carImg:'car1.png',
          carName:'周星TOP1进场座驾*7天',
        },
        {
          title:'富豪榜第二名',
          twolist:[
            {image:'ranking2.png',name:'周星TOP2头像框*7天',cost:0},
            {image:'rewardGift3.png',name:'专属礼物赠送特权*3天',cost:13140},
          ],
          carImg:'car2.png',
          carName:'周星TOP2进场座驾*7天',
        },
        {
          title:'富豪榜第三名',
          twolist:[
            {image:'ranking3.png',name:'周星TOP3头像框*7天',cost:0},
            {image:'rewardGift3.png',name:'专属礼物赠送特权*1天',cost:13140},
          ],
          carImg:'car3.png',
          carName:'周星TOP3进场座驾*7天',
        }
      ]
    }
    if(type == 3) {
      action.rewardList = [
        {
          title:'房间榜第一名',
          twolist:[
            {image:'rewardicon.png',name:'周星推荐角标*7天',cost:0},
          ],
        },
      ]
    }
  }
  onMounted(()=>{
    handleTab(1)
  })
</script>

<template>
  <div class="rulebox boxBackStyle">
    <img src="@/assets/images/titleimg3.png" class="titleimg">
    <div class="backBorder">
      <div class="listTypeTab flex">
        <div
          v-for="item of tablist"
          :key="item.type"
          :class="['tabBut',action.tabType == item.type?'select':'']"
          @click="handleTab(item.type)">
          {{ item.font }}
        </div>
      </div>
      <div class="rewardInfo" v-for="(item,index) in action.rewardList" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="twobox flex j-center">
          <div class="reward" v-for="(obj,key) in item.twolist">
            <div class="rewardback boxBack">
              <img :src="getAssetsFile(obj.image,'images')">
            </div>
            <div class="rewardName">{{ obj.name }}</div>
            <div v-if="obj.cost" class="cost flex-align">
              <img src="@/assets/images/icon4.png" class="icon">
              <div>{{ obj.cost }}</div>
            </div>
          </div>
        </div>
        <div v-if="item.carName" class="carbox">
          <div class="boxBack">
            <img :src="getAssetsFile(item.carImg,'images')">
          </div>
          <div class="font">{{ item.carName }}</div>
        </div>
        <div v-if="item.getTips" class="getTips">{{ item.getTips }}</div>
      </div>
    </div>
    <div v-if="action.tabType == 1" class="backBorder m-20">
      <div class="rewardInfo">
        <div class="title">周星擂主卫冕</div>
        <div class="twobox flex-align-center">
          <div class="reward">
            <div class="rewardback boxBack">
              <img src="@/assets/images/rewardGift1.png">
            </div>
            <div class="rewardName">梦境童话礼物</div>
            <div class="cost flex-align">
              <img src="@/assets/images/icon4.png" class="icon">
              <div>52000</div>
            </div>
          </div>
        </div>
        <div class="getTips">主播所收到的周星值两周累计需≥80000，即可解锁</div>
      </div>
    </div>
  </div>
  <div v-if="action.tabType == 1" class="boxBackStyle">
    <img src="@/assets/images/titleimg4.png" class="titleimg">
    <div class="backBorder">
      <div class="ruleFont">
        <div class="ruleTitle">· 评选时间 ·</div>
        <div class="font center">每周一00：00 ～ 周日23:59</div>
      </div>
      <div class="ruleFont">
        <div class="ruleTitle">· 参与方式 ·</div>
        <div class="font">
          <br />1. 周星榜-公会成员收到指定的周星礼物即可参加
          <br />2. 房间榜-公会房间内用户赠送指定周星礼物即可参加
          <br />3. 富豪榜-用户赠送指定周星礼物即可参与
          <br />4. 禁止违规行为,一经发现,我们将取消用户/房间的评选资格
        </div>
      </div>
      <div class="ruleFont">
        <div class="ruleTitle">· 评选规则 ·</div>
        <div class="font">
          <br />1. 每周官方会指定一个或多个周星道具
          <br />2. 周星榜:在榜用户,收到带“周星”标签的礼物可增加周星值
          <br />3. 房间榜:在房间内赠送带“周星”标签的礼物可为该房间增加周星值
          <br />4. 富豪榜:赠送周星道具给可参与竟选的周星用户可以增加富豪值
          <br />5. 周星擂主显示最近一周周星值最高的用户
          <br /><br />注：非周星礼物是无法提高排名的哦～
        </div>
      </div>
      <div class="ruleFont">
        <div class="ruleTitle">· 奖励说明 ·</div>
        <div class="font">
          <br />1. 周星专属头像框和座驾活动结束后系统发放
          <br />2. 周星礼物活动结束1-2天内官方人员进行下发
          <br />3. 周星专属礼物赠送特权会在工作日内发放
          <br />4. 用户周星擂主两周卫冕礼物奖励翻倍
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .m-20 {
    margin: 20px 0;
  }
  .backBorder {
    border-radius: 12px;
  }
  .rulebox {
    .backBorder {
      padding: 11px;
    }
    .listTypeTab {
      margin: 6px 0 16px;
      .tabBut {
        width: 97px;
        height: 28px;
        line-height: 29px;
        color: $ruleTabFontColor;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        background: $ruleTabBackColor;
        border-radius: 4px;
        transition: color .28s, background .28s;
      }
      .tabBut:nth-child(2) {
        margin: 0 12px;
      }
      .select {
        color: $ruleTabSelectFontColor;
        background: $ruleTabSelectBackColor;
      }
    }
    .twobox {
      padding-bottom: 20px;
    }
    .rewardInfo {
      width: 100%;
      height: max-content;
      background: $RewardBoxBackColor;
      border-radius: 12px;
      margin-bottom: 12px;
      .title {
        width: 130px;
        height: 36px;
        line-height: 36px;
        color: $ruleTitleFontColor;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        margin: 0 auto 20px;
        background: url($ruleTitleBack) left top /100% no-repeat;
      }
      .boxBack {
        background: $RewardBackColor;
        box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.24);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .reward {
        .rewardback {
          width: 140px;
          height: 140px;
          img {
            width: 104px;
            height: 104px;
          }
        }
        .rewardName {
          line-height: 20px;
          color: $fontColor;
          font-size: 12px;
          font-weight: 500;
          text-align: center;
          margin-top: 8px;
        }
        .cost {
          width: max-content;
          margin: 2px auto;
          .icon {
            width: 16px;
            height: 16px;
            margin-right: 2px;
          }
          div {
            font-size: 12px;
            font-weight: 500;
            color: $fontColor;
          }
        }
      }
      .reward:nth-child(2) {
        margin-left: 11px;
      }
      .carbox {
        width: 295px;
        margin: 0 auto 0;
        padding-bottom: 20px;
        box-sizing: border-box;
        .boxBack {
          height: 58px;
        }
        img {
          width: 248px;
          height: 58px;
        }
        .font {
          line-height: 20px;
          font-size: 12px;
          font-weight: 500;
          color: $fontColor;
          text-align: center;
          margin-top: 12px;
        }
      }
      .getTips {
        height: 38px;
        line-height: 38px;
        color: rgba($color: #F5DDB5, $alpha: .5);
        font-size: 10px;
        font-weight: 500;
        text-align: center;
        border-top: 1px solid rgba($color: #F5DDB5, $alpha: .2);
      }
    }
    .rewardInfo:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
  .ruleFont {
    padding: 12px 11px;
    box-sizing: border-box;
    border-bottom: 8px solid $ruleFontBorderColor;
    .ruleTitle {
      color: $fontColor;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
    }
    .ruleTitle::after {
      display: block;
      content: '';
      width: 20px;
      height: 3px;
      background: $ruleFontLineColor;
      border-radius: 4px;
      margin: 6px auto;
    }
    .center {
      text-align: center;
    }
    .font {
      color: $fontColor;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
    }
  }
  .ruleFont:nth-last-child(1) {
    border-bottom: none;
  }
</style>